<template>
    <div>
        <div class="container">
            <div class="handle-box">
                <el-button type="primary" @click="func_handleAdd">添加属性</el-button>
                <el-button type="success" icon="el-icon-refresh" @click="func_handleSearch" plain>刷新</el-button>
            </div>
            <el-table :data="productAttributeTableData" v-loading="isLoading"
                row-key="id" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                <el-table-column type="expand" >
                    <template #default="scope">
                        <el-scrollbar>
                        <el-table :data="scope.row.productAttributeValues" border class="table" ref="multipleTable" header-cell-class-name="table-header">
                            <el-table-column label="index" width="70" align="center">
                                <template #default="scope">
                                    {{scope.$index +1 }}
                                </template>
                            </el-table-column>
                            <el-table-column prop="attrId" label="绑定属性ID" v-if="false"></el-table-column>
                            <el-table-column prop="attrValue" label="属性绑定值" ></el-table-column>
                            <el-table-column prop="sort" label="操作" :width=optColumnWidth>
                                <template #default="scope">
                                    <el-button type="text" class="red" @click="func_handlerProductAttributeValueDel(scope.$index, scope.row.id)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                        </el-scrollbar>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="70" align="center"  v-if="false"></el-table-column>
                <el-table-column label="index" width="70" align="center">
                    <template #default="scope">
                        {{scope.$index +1 }}
                    </template>
                </el-table-column>
                <el-table-column prop="attrName" label="属性名称">
                    <template #default="scope">
                        <el-button type="text" @click="func_handleEdit(scope.$index, scope.row)" >{{scope.row.attrName}}</el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="classifyName" label="所属类目">
                    <template #default="scope">
                    {{classifyData.classifyName}}</template>
                </el-table-column>
                <el-table-column prop="inputType" label="输入方式"></el-table-column>
                <el-table-column prop="strInputType" label="输入方式"></el-table-column>
                <el-table-column :width=optColumnWidth>
                    <template #default="scope">
                        <el-button type="text" class="red mr10" icon="el-icon-delete" @click="func_handlerDel(scope.$index, scope.row)"> 删除</el-button>
                        <el-dropdown :hide-on-click="false">
                            <span class="el-dropdown-link green mr10"><el-icon class="el-icon-lx-info mr10" />更多</span>
                            <template #dropdown>
                                <el-dropdown-menu>
                                    <el-dropdown-item 
                                        :disabled="scope.row.inputType === '11010001'"
                                        @click="func_handlerBundDialog(scope.$index, scope.row)" > <el-icon class="el-icon-lx-edit" />编辑属性值 </el-dropdown-item>
                                </el-dropdown-menu>
                            </template>
                        </el-dropdown>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination background layout="total, prev, pager, next" :current-page="query.pageNum"
                    :page-size="query.pageSize" :total="dataTotal" @current-change="func_handlePageChange"></el-pagination>
            </div>
        </div>
        <!-- 详情数据抽屉框 -->
        <el-drawer v-model="drawerEditVisible" title="类目属性详情" :with-header="true" size="55%">
            <template #title>
                <h4>类目属性详情</h4>
            </template>
            <template #default>
                <el-form :label-width="formLabelWidth" 
                :model="productAttributeDrawerForm" 
                :rules="productAttributeDrawerFormRules" 
                ref="productAttributeDrawerFormRef" >
                    <el-card class="box-card">
                        <el-row>
                            <el-col :span="12"><el-form-item label="类目名称">{{ classifyData.classifyName }}</el-form-item></el-col>
                            <el-col :span="12"><el-form-item label="类目分类">{{ classifyData.strClassifyColumn }}</el-form-item></el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12"><el-form-item label="类目等级">{{ classifyData.classifyGrade }}</el-form-item></el-col>
                            <el-col :span="12"><el-form-item label="备注">{{ classifyData.remark }}</el-form-item></el-col>
                        </el-row>
                    </el-card>
                    <el-card class="box-card" style="margin-top:15px">
                        <el-form-item label="ID" v-if="false">
                            <el-input v-model="productAttributeDrawerForm.id" class="handle-input mr10" :readonly=true></el-input>
                        </el-form-item>
                        <el-form-item label="所属类目" prop="classifyId">
                            <el-input v-model="productAttributeDrawerForm.classifyId" class="handle-input mr10" readonly v-if="false"/>
                            <el-input v-model="classifyData.classifyName" class="handle-input mr10" readonly/>
                        </el-form-item>
                        <el-form-item label="商品属性名称">
                            <el-input v-model="productAttributeDrawerForm.attrName" class="handle-input mr10" />
                        </el-form-item>
                        <el-form-item label="数据录入方式">
                            <el-input v-model="productAttributeDrawerForm.inputType" class="handle-input mr10" v-if="false"/>
                            <el-input v-model="productAttributeDrawerForm.strInputType" placeholder="数据录入方式" class="handle-input mr10" readonly clearable @click="vDictDialogVisible = true"/>
                        </el-form-item>
                        <el-form-item label="展示方式">
                            <el-input v-model="productAttributeDrawerForm.sortType" class="handle-input mr10" v-if="false" />
                            <el-select v-model="productAttributeDrawerForm.sortType" placeholder="请选择">
                                <el-option v-for="item in sortTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="排序">
                            <el-input-number v-model="productAttributeDrawerForm.sortKey" :min="1" :max="10" size="small" class="mr10" />
                        </el-form-item>
                        <el-form-item >
                            <!-- <el-button type="danger" icon="el-icon-delete" @click="func_drawerDelete" plain>删除</el-button> -->
                            <el-button type="success" icon="el-icon-lx-edit" @click="func_drawerSave" plain>保存</el-button>
                        </el-form-item>
                     </el-card>
                </el-form>
            </template>
        </el-drawer>
        <!-- 引用数据插件 -->
        <el-dialog title="添加属性" v-model="vAttributePopVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VAttribute v-bind:selectValue="classifyData" @attributeData="func_loadvAttributeData" />
            </div>
        </el-dialog>
        <!-- 引用数据插件 -->
        <el-dialog title="绑定属性值" v-model="vAttributeValueDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VAttributeValue v-bind:selectValue="productAttribute" @attributeValueData="func_loadvAttributeValueData" />
            </div>
        </el-dialog>
        <!-- 引用字典数据插件 -->
        <el-dialog title="数据录入方式" v-model="vDictDialogVisible" width="55%" :close-on-click-modal="false">
            <div class="handle-box">
                <VDict v-bind:selectValue="66" @dictData="func_loadvDictData" />
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, toRefs } from "vue";
import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElMessageBox } from "element-plus";

import { findProductClassify, } from "../../../api/hairmanager/productClassify";
import { findAttributeListPageByClassifyId, saveProductAttribute, deleteProductAttribute, } from "../../../api/hairmanager/productAttribute";
import { deleteAttributeValue, } from "../../../api/hairmanager/productAttributeValue";

import { NO_DATA_SELECT_ERROR, SUCCESS_ADDDATA_DIALOG_MESSAGE, SUCCESS_DELDATA_DIALOG_MESSAGE, SUCCESS_EDITDATA_DIALOG_MESSAGE, formLabelWidth, } from "../../../api/CommonErrorMessage.js";

import VAttributeValue from "./components/attributeValue.vue";
import VAttribute from "./components/attributeForm.vue";
import VDict from "../components/dict.vue";
export default {
    name: "productAttribute",
    components: {VDict, VAttribute, VAttributeValue},
    setup() {
        const router = useRouter();
		const route = useRoute();

        const formLabelWidth = ref("170px");
        const optColumnWidth = 150;
        const vAttributePopVisible = ref(false);
        const vAttributeValueDialogVisible = ref(false);
        // 主表格查询条件
        const query = reactive({
            classifyId: 0,
            pageNum: 1,
            pageSize: 10,
        });
        // 主表格数据
        const productAttributeTableData = ref([]);
        const isLoading = ref(true);
        // 主表格数据总数
        const dataTotal = ref(0);
        // 分类表单数据
        const classifyData = reactive({
            id : 0,
            classifyColumn: "",
            strClassifyColumn: "",
            classifyId: 0,
            classifyName: "",
            remark: "",
            classifyGrade: 0,
            parentId: 0,
            load: false,
        });
        const productAttribute = reactive({
            selectValueId: 0,
            selectValueName: '',
        });
        const sortTypeOptions = [
            {
                value: "num",
                label: "数字",
            },
            {
                value: "char",
                label: "文字",
            }
        ];
        // =========================================================================================
        // 主表格业务处理========================================================================================= START
        /**
         * @name 获取主表格数据
         */
        const func_getData = () => {
            var id = route.query.id;
            // 读取分类数据
            findProductClassify(id).then((res) => {
                Object.keys(classifyData).forEach(item => {
                    classifyData[item] = res.data[item];
                });
            })
            query['classifyId'] = id;
            // 读取分类下的数据属性表格
            findProductAttributeListByClassifyIdWithPage(query).then((res) => {
                productAttributeTableData.value = res.data.list;
                dataTotal.value = res.data.total;
            });
            isLoading.value = false;
        };
        func_getData();
        /**
         * @name 主数据查询操作
         */
        const func_handleSearch = () => {
            query.pageNum = 1;
            func_getData();
        };
        /**
         * @name 分页导航
         */
        const func_handlePageChange = (val) => {
            query.pageNum = val;
            func_getData();
        };
        const func_handleAdd = () => {
            classifyData['classifyId'] = route.query.id;
            classifyData['load'] = false;
            vAttributePopVisible.value = true;
        };
        /**
         * @name 主表格内抽屉业务处理
         * @desp 类目属性数据业务处理
         */
        const func_handleEdit = (index, row) => {
            // 表格内数据初始化到表单里
            Object.keys(productAttributeDrawerForm).forEach((item) => {
                productAttributeDrawerForm[item] = row[item];
            });
            drawerEditVisible.value = true;
        };
        /**
         * @name 主表格内删除数据
         */
        const func_handlerDel = (index, row) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                deleteProductAttribute(row['id']).then((res) => {
                    ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                    func_getData();
                });
            }).catch(() => {});
        };
        /**
         * @name 主表格内删除数据
         */
        const func_handlerProductAttributeValueDel = (index, id) => {
            // 二次确认删除
            ElMessageBox.confirm("确定要删除吗？", "提示", {type: "warning",})
            .then(() => {
                deleteProductAttributeValue(id).then((res) => {
                    ElMessage.success(SUCCESS_DELDATA_DIALOG_MESSAGE);
                    func_getData();
                });
            }).catch(() => {});
        };
        const func_handlerBundDialog = (index, row) => {
            productAttribute['selectValueId'] = row['id'];
            productAttribute['selectValueName'] = row['attrName'];
            vAttributeValueDialogVisible.value = true;
        }
        // 主表格业务处理========================================================================================= END
        // 详细数据抽屉业务处理========================================================================================= START
        let addFlg = ref(false);
        const drawerEditVisible = ref(false);
        /**
         * @name 定义业务表单
         */
        const getInitFormData = () => {
            return {
                id: 0,
                attrName: "",
                classifyId: 0,
                inputType: "",
                sortType: "",
                strInputType: "" ,
                productAttributeValues: [
                {
                    id: 0,
                    attrId: 0,
                    attrValue: "",
                    sort: 0
                }],
                attributesValueOptionId: 0,
                strInputAttributeValue: "",
            }
        };
        /**
         * @name 表单初始化
         */
        const resetproductAttributeForm = () => {
            Object.assign(productAttributeDrawerForm, getInitFormData());
        };
        // 分类属性表单数据
        const productAttributeDrawerForm = reactive(getInitFormData());
        const productAttributeDrawerFormRef = ref(null);
        // 表单验证规则
        const productAttributeDrawerFormRules = {
            classifyColumn: [
                { required: true, message: "请选择类目类型", trigger: "blur" },
            ],
            classifyName: [
                { required: true, message: "请输入类目名称", trigger: "blur" },
            ],
        };
        const func_drawerSave = () => {
            saveProductAttribute(productAttributeDrawerForm).then((res) => {
                if(res.code != 200) {
                    ElMessage.error(res.message);
                } else {
                    ElMessage.success(SUCCMESS_ADDDATA_DIALOG_MESSAGE);
                    drawerEditVisible.value = false;
                    func_getData();
                }
            });
        };
        // 详细数据抽屉业务处理========================================================================================= END
        // 组件业务处理========================================================================================= START
        const func_loadvAttributeData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                vAttributePopVisible.value = false;
                classifyData['load'] = true;
                func_getData();
            } else {
                vAttributePopVisible.value = true;
            }
        }
        // 组件业务处理========================================================================================= START
        const func_loadvAttributeValueData = (v) => {
            // 判定业务处理成功，关闭对话框,刷新列表，否则保持对话框状态
            if(v['state'] === 1) {
                vAttributeValueDialogVisible.value = false;
                func_getData();
            } else {
                vAttributeValueDialogVisible.value = true;
            }
        }
        // 组件业务处理========================================================================================= END
        // 引用字典数据插件业务处理========================================================================================= START
        const vDictDialogVisible = ref(false);
        /**
         * @name 字典数据插件引用对话框
         */
        const func_drawerBundDialog = () => {
            vDictDialogVisible.value = true;
        };
        const func_loadvDictData = (v) => {
            productAttributeDrawerForm.inputType = v.dicCode;
            productAttributeDrawerForm.strInputType = v.dicName;
            vDictDialogVisible.value = false;
        };
        // 引用字典数据插件业务处理========================================================================================= END
        return {
            // 系统变量
            formLabelWidth, optColumnWidth, query, productAttributeTableData, dataTotal, classifyData, sortTypeOptions, isLoading,
            // 主表格调用方法
            func_handleSearch, func_handlePageChange, func_handleAdd, func_handleEdit, func_handlerDel, func_handlerProductAttributeValueDel,
            func_handlerBundDialog,
            // 详细数据抽屉参数变量
            drawerEditVisible, productAttributeDrawerForm, productAttributeDrawerFormRef, productAttributeDrawerFormRules, 
            // 详细数据抽屉调用方法
            vAttributePopVisible, func_loadvAttributeData, func_drawerSave,
            // 组件业务处理
            productAttribute, vAttributeValueDialogVisible, func_loadvAttributeValueData,
            // 数据字典参数变量
            vDictDialogVisible, func_loadvDictData,
        };
    },
};
</script>
<style scoped>
.handle-box {
    margin-bottom: 20px;
}

.handle-select {
    width: 180px;
}

.handle-input {
    width: 300px;
    display: inline-block;
}
.table {
    width: 100%;
    font-size: 14px;
}
.red {
    color: #ff0000;
}
.green {
    color: #67c23a;
}
.mr10 {
    margin-right: 10px;
}
.table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-dropdown-link {
  cursor: pointer;
  /* color: var(--el-color-primary); */
  color: #67c23a;
  display: flex;
  align-items: center;
}
</style>